<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one{
      color: red;
      background-color: yellow;
    }
    .two{
      color: blue;
      background-color: pink;
    }
  </style>

  <script>
    function $(id){
      return document.getElementById(id);
    }

    //验证姓名
    function checkName(){
       return checkFormElement(/^[a-zA-Z\u4e00-\u9fa5]{2,}$/,
         "userName","nameSpan","姓名必须为两位以上的字母或汉字");
    }
    //验证电话
    function checkPhone(){
      return checkFormElement(/^1[3578]\d{9}$/,
        "phone","phoneSpan","电话必须为13、15、17、18开始的11位数");
    }
    //验证工资
    function checkMoney(){
      return checkFormElement(/^\d{4,5}$/,
        "money","moneySpan","工资必须为4-5位数字");
    }
    //验证email
    function checkEmail(){
      return checkFormElement(/^[a-zA-Z0-9]{3,}@[a-zA-Z0-9]{2,}[.](com|cn|net)$/,
        "email","emailSpan","email的格式为XX@XX.com");
    }

    /**
     * 验证表单元素
     * @param rexp 验证正则表达式
     * @param txtId 文本框ID
     * @param spanId 错误提示span标签id
     * @param errorInfo 错误提示
     * @returns {boolean} 验证是否通过
     */
    function checkFormElement(rexp,txtId,spanId,errorInfo){
      if(rexp.test($(txtId).value)){
        $(spanId).innerHTML = "验证通过";
        $(spanId).style.color = "green";
        return true;
      }
      else{
        $(spanId).innerHTML = errorInfo;
        $(spanId).style.color = "red";
        return false;
      }
    }

    //提交表单
    function submitForm(){
      return checkName() & checkPhone() & checkMoney() & checkEmail();
    }

    //跳转页面
    function forward(){
      location.href = "table.html";
    }
    //改变样式
    function changeStyle(){
      $("testSpan").className = "two";
    }
  </script>
</head>
<body>
  <form action="add" id="f1" onsubmit="return submitForm()==0?false:true">
     姓名：<input type="text" name="userName" id="userName" onblur="checkName()"><span id="nameSpan"></span><br>
     电话：<input type="text" name="phone" id="phone" onblur="checkPhone()"><span id="phoneSpan"></span><br>
     工资：<input type="text" name="money" id="money" onblur="checkMoney()"><span id="moneySpan"></span><br>
     邮箱：<input type="text" name="email" id="email" onblur="checkEmail()"><span id="emailSpan"></span><br>
      <input type="submit" value="提交">
  </form>


  <input type="text" onkeypress="return false">
  <a href="table.html">跳转页面</a><br>
  <input type="button" onclick="forward()" value="跳转页面"><br>
  <span id="testSpan" class="one">测试span</span>
  <input type="button" value="改变样式" onclick="changeStyle()">
</body>
</html>
